<template>
  <div class="index">
    <div class="header">
      <div class="bg">
        <img src="../../assets/image/bg.jpg"
             width="100%">
      </div>
      <div class="cont">
        <div class="title">
          <div class="img">
            <img src="../../../static/image/logo.jpg"
                 width="100%"
                 height="100%">
          </div>
          <span>雾隐苍山</span>
        </div>
        <div class="date">
          <div class="search flex between">
            <img src="../../assets/image/search.png">
            <span class="txt"
                  @click="input">请输入名称</span>
            <img src="../../assets/image/location.png">
            <span @click="cityShow =true">{{city}}</span>
          </div>
          <div class="datechoose flex between"
               @click="dateShow= true">
            <div class="box">
              <p class="col_sub">入住</p>
              <div class="fz28">
                <span>{{value[0] |month}}月{{value[0] |day}}日</span>
                <span>{{value[0] |week}}</span>
              </div>
            </div>
            <div class="time_around flex">{{value|days}}晚</div>
            <div class="box">
              <p class="col_sub t-r">离店</p>
              <div class="fz28">
                <span>{{value[1] |month}}月{{value[1] |day}}日</span>
                <span>{{value[1] |week}}</span>
              </div>
            </div>
          </div>
          <div class="search-btn flex"
               @click="search">查询</div>
        </div>
      </div>
    </div>
    <div class="recommend">
      <h2>精选推荐</h2>
      <ul class="hotel_list">
        <li @click="$router.push({path:'/hotel',query:{hotelId : item.id}})"
            v-for="(item,index) in hotelList"
            :key="index">
          <div class="hotel_img">
            <img :src="item.file | imgUrl"
                 alt>
          </div>
          <div class="con">
            ￥{{item.price}}
            <span>起</span>
          </div>
          <h3 class="ellipsis">{{item.name}}</h3>
          <div class="location col_sub"
               v-show="item.distance">{{item.distance}}km</div>
        </li>
      </ul>
    </div>

    <div class="city"
         v-show="cityShow">
      <div class="mycity">
        我的城市：&nbsp;&nbsp;
        <span id="qyxs"
              class="cityname">{{currentCity}}</span>
      </div>
      <w-sortlist v-model="listData"
                  @click="select"
                  children="cities"
                  relkey="core"
                  label="name"></w-sortlist>
    </div>
    <popup v-model="dateShow">
      <inline-calendar v-model="value"
                       @on-change="choose"
                       disable-past></inline-calendar>
    </popup>
  </div>
</template>

<script>
import wSortlist from 'wenlist';
import { InlineCalendar, Popup } from 'vux';
import { mapActions, mapGetters } from 'vuex';
import * as API from '../../api';
import mixins from '../../mixins'
export default {
  mixins: [mixins],
  components: {
    InlineCalendar,
    Popup,
    wSortlist
  },
  data () {
    return {
      cityShow: false,
      listData: [],
      list: [],
      items: [],
      index: 0,
      enter: [],
      value: [],
      days: '',
      dateShow: false,
      city: '全部',
      hotelList: '',
      userAddr: { lng: '', lat: '', city: '' }
    };
  },
  created () {
    this.initDate();
    this.ready()
    // 城市列表
    this.$http
      .get(API.city_lsit)
      .then(res => {
        this.listData = res.data;
      })
      .catch(err => {
        console.log(err);
      });
    if (this.addr) {
      this.hotel(this.addr.longitude, this.addr.latitude);
    } else {
      this.hotel();
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'addr'])
  },
  methods: {
    ...mapActions(['initAddr', 'dateChoose']),
    initDate () {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let day = now.getDate();
      this.startDay = `${year}-${month}-${day}`;
      this.value[0] = this.startDay;
      let end = new Date();
      end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
      this.endDay = `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`;
      this.value[1] = this.endDay;
    },
    choose (value) {
      if (this.value.length > 2) this.value.splice(0, 2);
      if (Date.parse(new Date(this.value[0])) > Date.parse(this.value[1])) this.value.splice(1, 1);
      if (this.value.length === 2) {
        this.dateShow = false;
        this.dateChoose(value);
      }
    },
    ready () {
      const myCity = new BMap.LocalCity();
      myCity.get(result => {
        this.currentCity = result.name;
        this.userAddr.currentCity = result.name;
        this.initAddr(this.userAddr);
      });
    },
    select (data) {
      this.city = data.name;
      this.cityShow = false;
      console.log(this.city);
    },
    search () {
      let data = {
        type: 'button',
        hotelName: '',
        order: 0,
        city: this.city,
        currentCity: this.currentCity
      };
      this.userAddr.city = this.currentCity;
      if (this.userAddr.city) {
        this.initAddr(this.userAddr);
      }
      console.log(data);
      this.$router.push({ name: 'searchResult', params: data });
    },
    input () {
      let data = {
        longitude: this.userlng,
        latitude: this.userlat,
        city: this.currentCity
      };
      this.initAddr(data);
      this.$router.push('/search');
    },
    hotel (longitude, latitude) {
      this.$http
        .get(API.recommend, {
          params: {
            openId: this.userInfo.openId,
            longitude: longitude || '',
            latitude: latitude || ''
          }
        })
        .then(res => {
          this.hotelList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.index {
  padding-bottom: 30px;
}
.header {
  position: relative;
  .bg {
    position: absolute;
    height: 550px;
    background-color: #ecdfdf;
    img {
      height: 450px;
    }
  }
  .cont {
    position: relative;
    z-index: 2;
    padding: 20px;
    .title {
      text-align: center;
      margin-bottom: 30px;
      .img {
        width: 100px;
        height: 100px;
        border: 5px solid #fff;
        border-radius: 50%;
        margin: 100px auto 50px;
        overflow: hidden;
      }
      span {
        font-size: 30px;
        text-shadow: 0 0 0.15625rem rgba(0, 0, 0, 0.5);
        color: #fff;
        font-weight: 700;
      }
    }
    .date {
      width: 100%;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      background: #fff;
      @extend .border;
      border-radius: 5px;
      padding: 20px 40px 0;
      box-sizing: border-box;
      .search {
        width: 100%;
        height: 90px;
        @extend .bor_b;
        img {
          width: 32px;
          // margin-right: 5;
        }
        .txt {
          width: 65%;
          color: #ccc;
        }
      }
      .search-btn {
        width: 100%;
        height: 80px;
        background-image: linear-gradient(227deg, #77cbfb, #4285f6);
        border-radius: 0.0625rem;
        margin: 0.3125rem auto 0.53125rem;
        color: #fff;
        font-size: 0.375rem;
      }
    }
  }
}
.recommend {
  h2 {
    font-size: 30px;
    padding: 10px 20px;
    font-weight: bold;
  }
  .hotel_list {
    margin: 10px 20px 30px;
    white-space: nowrap;
    overflow-x: auto;
    @extend .bor_b;
    li {
      display: inline-block;
      margin-right: 20px;
      width: 320px;
      vertical-align: top;
      position: relative;
      .hotel_img {
        img {
          width: 100%;
          height: 240px;
          border-radius: 5px;
        }
      }
      .con {
        position: absolute;
        left: 0;
        bottom: 130px;
        color: #fff;
        background: rgba(0, 0, 0, 0.7);
        padding-right: 20px;
        font-size: 26px;
        span {
          font-size: 20px;
        }
      }
      h3 {
        margin: 10px;
      }
      .location {
        background: url("../../assets/image/location.png") no-repeat 0
          center/25px;
        padding-left: 30px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
